<template>
  <h1>一个人的信息</h1>
  <h1>姓名 {{ name }}</h1>
  <h1>全称 {{ fullName }}</h1>
  <h1>年龄 {{ age }}</h1>
  <h1>爱好 {{ hobby }}</h1>
  <h1>count {{ count }}</h1>
  <Son @sonSay="sonSay" :son="son" title="我是子组件" />
  <button @click="sayHello">说话</button>
  <button @click="count++">count++</button>
  <hr />

  <button @click="updateInfo">修改信息</button>
</template>

<script>
import Son from "./components/Son.vue";
import { ref, reactive, toRefs, computed, watch, watchEffect } from "vue";
export default {
  name: "App",
  components: {
    Son,
  },
  setup() {
    let person = reactive({
      name: "王五",
      age: 12,
      hobby: ["抽烟", "喝酒"],
      fullName: computed(() => {
        return person.name + person.age;
      }),
    });
    let son = reactive({
      name: "我是儿子王刘",
      age: 11,
    });
    let count = ref(0);
    function sayHello() {
      alert(`我叫${person.name}`);
    }
    function updateInfo() {
      person.hobby[1] = "喝酒修改了";
      person.name = "liu";
    }
    function sonSay() {
      alert("子组件触发了组件的方法");
    }
    watch(count, (cur, old) => {
      console.log(cur, "##", old);
    });
    watchEffect(() => {
      console.log("姓名变化了", person.name);
      console.log("count变化了", count.value);
    });
    return {
      sayHello,
      ...toRefs(person),
      count,
      son,
      updateInfo,
      sonSay,
    };
  },
};
</script>

<style></style>
